@charset 'utf-8';
@import 'reset';
$defaultcolor: #ff9344;
$htmlFontSize: 40px;
@function half($length){
    @return ($length/2)+px;
}

@function getRem($px){
    @return ($px/$htmlFontSize)*1rem;
}
    


*{
    margin: 0;
    padding: 0;
    list-style: none;
}

html{
    font-size: $htmlFontSize;
}


html,body{
    width: 100%;
    height: 100%;
}

.web{
    width: 100%;
    height: 100%;
    position: relative;
}

header{
    width: 100%;
    height: getRem(150px);
    position: absolute;
    top: 0;
}

header .logo{
    width: getRem(124px);
    height: getRem(124px);
    float: left;
    margin-left: getRem(20px);
    margin-top: getRem(16px);
}

header .logo img{
    width: 100%;
    height: 100%;
}

header .search-bar{
    width: getRem(296px);
    height: getRem(55px);
    border: 1px solid #ff9344;
    border-radius: 25px;
    padding: 0 getRem(12px);
    box-sizing: border-box;
    margin: getRem(50px) auto 0; 
    line-height: getRem(55px);
    font-size: 0;
}
    
header .search-bar input{
    width: getRem(199px);
    height: 100%;
    border: none;
    vertical-align: top;
    font-size: getRem(24px);
    border-radius: getRem(20px);
    outline: none;
    text-indent: getRem(4px);
    margin-left: getRem(10px); 
}       

header .search-bar i{
    font-size: getRem(34px);
    color: #ff9344; 
    vertical-align: top; 
    margin-left: getRem(10px);   
}
        
header .select-bar{
    float: right;
    margin-right: getRem(22px);
    margin-top: getRem(48px);
    width: getRem(163px);
    height: getRem(60px);
    border: 1px solid #FF9344;
    background: url(../img/triangle.png) getRem(94px) center no-repeat;
    background-size: getRem(30px) getRem(16px) ;    
}       
        
header select{
    appearance: none;           
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    background: white;
    outline: none;
    width: 100%;
    height: 100%;
    background-color: transparent;
    font-size: getRem(25px);
    padding-left: getRem(14px); 
    padding-bottom: getRem(10px);
    line-height: getRem(60px);
}

header select+i{
        margin-left: getRem(22px);
}


header i{
    color: #ff9344;
}
//header end     

//footer start       
footer{
    width: 100%;
    height: getRem(136px);
    background: white;
    position: absolute;
    bottom: 0;
    ul{
        margin-top: getRem(16px);
    }
    ul li{
        width: 25%;
        height: 100%;
        float: left;
        text-align: center;
        i.iconfont{
            font-size: getRem(60px);
            -webkit-text-stroke: 1px #FF9344;
            color: transparent;
        }
        &.active .iconfont{
            color: #FF9344;
        }
        a{
            color: black;
        }
        p{
            font-size: getRem(26px);
        }
        &:hover .iconfont{
            color: #eb883f;
        }
    }
   
}
//footer end
  
  
//middle content start           
section{
    width: 100%;
    position: absolute;
    top: getRem(150px);;
    bottom: getRem(136px);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    
}
//middle content end           
// slide start
.carous{
        width: 100%;
        img{
            width: 100%;
        }
}
//slide end             
            
   
            
